<template>
  <div>
    <i-input
      v-model="searchKey"
      placeholder="请输入员工姓名"
      style="width: 150px"
    ></i-input>
    <i-button type="primary" style="margin-right: 10px" @click="searchData"
      >搜索</i-button
    >
    <Dropdown trigger="custom" :visible="visible" style="margin-bottom: 10px">
      <i-button type="primary" @click="visible = !visible">
        添加列
        <Icon type="ios-arrow-down"></Icon>
      </i-button>
      <i-button type="primary" @click="exportData" style="margin-left: 10px"
        >导出</i-button
      >
      <DropdownMenu slot="list" style="width: 300px">
        <div style="border-bottom: 1px dashed grey">
          <Tag
            v-for="item in columns1"
            :key="item.key"
            :name="item.title"
            closable
            @on-close="handleClose2"
            style="margin-left: 5px"
          >
            {{ item.title }}
          </Tag>
        </div>

        <span v-for="item in columns2" :key="item.key">
          <i-button
            icon="ios-add"
            type="dashed"
            size="small"
            @click="handleAdd(item)"
            style="margin: 5px 5px 0px 5px"
          >
            {{ item.title }}
          </i-button>
        </span>
        <div style="text-align: right; margin: 5px 5px 0px 0px">
          <i-button type="primary" size="small" @click="visible = false"
            >关闭</i-button
          >
        </div>
      </DropdownMenu>
    </Dropdown>

    <i-table :columns="columns1" :data="tableData" ref="table">
      <template slot-scope="{ row }" slot="action">
        <i-button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="
            {
              dialogFormVisible = true;
              form = row;
            }
          "
        >
          View
        </i-button>
        <Button type="error" size="small" @click="deleteData(row)"
          >Delete</Button
        >
      </template>
    </i-table>
    <div style="display: flex">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
    <el-dialog title="修改员工信息" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别">
              <el-select v-model="form.sex" placeholder="性别">
                <el-option
                  v-for="item in sexData"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="手机">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="部门">
              <el-select v-model="form.deptId" placeholder="请选择用户所属部门">
                <el-option
                  v-for="item in deptData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="岗位">
              <el-select v-model="form.jobId" placeholder="请选择用户所属岗位">
                <el-option
                  v-for="item in jobData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="基础工资">
              <el-input v-model="form.baseSalary"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证">
              <el-input v-model="form.card_num"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="学历">
              <el-input v-model="form.education"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所学专业">
              <el-input v-model="form.speciality"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="qq号码">
              <el-input v-model="form.qq_num"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="邮箱">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系地址">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="民族">
              <el-input v-model="form.race"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="政治面貌">
              <el-input v-model="form.party"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="电话">
              <el-input v-model="form.tel"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="邮政编码">
              <el-input v-model="form.post_code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="爱好">
              <el-input v-model="form.hobby"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remake"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editData">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "employeeInf",
  components: {},
  data() {
    return {
      columns1: [
        {
          title: "姓名",
          key: "name",
          width: 100,
          fixed: "left",
        },
        {
          title: "性别",
          key: "sex",
          width: 100,
          render: (h, params) => {
            if (params.row.sex == 1) {
              return h("span", {}, "男");
            } else {
              return h("span", {}, "女");
            }
          },
        },
        {
          title: "手机号",
          key: "phone",
          width: 150,
        },
        {
          title: "基本工资",
          key: "baseSalary",
          width: 100,
        },
        {
          title: "部门",
          key: "deptName",
          width: 100,
        },
        {
          title: "职位",
          key: "jobName",
          width: 100,
        },
        {
          title: "学历",
          key: "education",
          width: 100,
        },
        {
          title: "所学专业",
          key: "speciality",
          width: 150,
          tooltip: true,
        },
        {
          title: "住址",
          key: "address",
          width: 200,
          tooltip: true,
        },
        {
          title: "操作",
          slot: "action",
          width: 190,
          align: "center",
        },
      ],
      columns2: [
        {
          title: "身份证号",
          key: "card_num",
          width: 200,
          tooltip: true,
        },
        {
          title: "邮编",
          key: "post_code",
          width: 150,
        },
        {
          title: "QQ号",
          key: "qq_num",
          width: 150,
        },
        {
          title: "邮箱",
          key: "email",
          width: 200,
          tooltip: true,
        },
        {
          title: "政治面貌",
          key: "party",
          width: 150,
        },
        {
          title: "出生日期",
          key: "birthday",
          width: 130,
        },
        {
          title: "民族",
          key: "race",
          width: 150,
        },
        {
          title: "特长",
          key: "hobby",
          width: 150,
        },
        {
          title: "备注",
          key: "remake",
          width: 150,
        },
      ],
      data1: [],
      visible: false,
      allData: [],
      tableData: [],
      page: 1, //页脚显示的当前页
      size: 10, //一页多少条数据
      total: 400, //总条目数
      searchKey: "",
      dialogFormVisible: false,
      form: {
        id: "", //details_id
        employeeId: "",
        name: "",
        userId: "",
        deptId: "",
        jobId: "",
        baseSalary: "",
        sex: "",
        phone: "",
        card_num: "",
        education: "",
        address: "",
        post_code: "",
        tel: "",
        qq_num: "",
        email: "",
        party: "",
        birthday: "",
        race: "",
        speciality: "",
        hobby: "",
        remake: "",
      },
      sexData: [
        {
          label: "男",
          value: 1,
        },
        {
          label: "女",
          value: 2,
        },
      ],
      jobData: "", //本公司的职位信息
      deptData: "", //部门信息
    };
  },
  mounted() {
    this.getEmployeeInf();
    this.getAllDept();
    this.getAllJob();
  },
  methods: {
    //获取所有部门信息
    getAllDept() {
      this.$request.get("dept/queryAll").then((res) => {
        // console.log(res);
        if (res.data.obj != null) {
          this.deptData = res.data.obj;
          console.log(this.deptData);
        } else {
          this.$message.error("信息获取失败");
        }
      });
    },
    //获取所有的职位信息
    getAllJob() {
      this.$request.get("job/queryAll").then((res) => {
        if (res.data.obj != null) {
          this.jobData = res.data.obj;
          // console.log(this.jobData);
        } else {
          this.$message.error("信息获取失败");
        }
      });
    },
    searchData() {
      this.allData.forEach((item) => {
        if (item.name == this.searchKey) {
          this.tableData = [];
          this.tableData.push(item);
          return;
        }
      });
    },
    editData() {
      let url = "/employee/updateInf";
      this.$request.post(url, this.form).then((res) => {
        if (res.data.obj == true) {
          this.getEmployeeInf();
          this.$message.success("修改成功");
          this.dialogFormVisible = false;
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    deleteData(row) {
      let url = "/employee/deleteById/" + row.employeeId + "/" + row.userId;
      this.$request.get(url).then((res) => {
        console.log("ok", res);
        this.getEmployeeInf();
      });
    },
    exportData() {
      this.$refs.table.exportCsv({
        filename: "The original data",
      });
    },
    //分页表格数据
    getTableData() {
      //allData为全部数据
      this.tableData = this.allData.slice(
        (this.page - 1) * this.size,
        this.page * this.size
      );
      this.total = this.allData.length; //总条目等于allDaTa长度
    },
    getEmployeeInf() {
      let url = "/employee/queryAllEmployeeInf";
      this.$request.get(url).then((res) => {
        console.log("res", res.data.obj);
        //allData为全部数据
        this.allData = res.data.obj;
        //分页表格数据
        this.tableData = this.allData.slice(
          (this.page - 1) * this.size,
          this.page * this.size
        );
        if (this.tableData.length == 0) {
          this.tableData = this.allData.slice(
            (this.page - 2) * this.size,
            this.page * this.size
          );
        }
        this.total = this.allData.length; //总条目等于allDaTa长度
      });
    },
    handleAdd(item) {
      console.log("add", item);
      this.columns1.push(item);
      const temp = this.columns1[this.columns1.length - 1];
      this.columns1[this.columns1.length - 1] =
        this.columns1[this.columns1.length - 2];
      this.columns1[this.columns1.length - 2] = temp;
      for (let i = 0; i < this.columns2.length; i++) {
        if (this.columns2[i].title == item.title) {
          this.columns2.splice(i, 1);
          break;
        }
      }
    },
    handleClose2(event, name) {
      console.log("event", event);
      console.log("name", name);
      if (name != "操作" && name != "姓名") {
        for (let i = 0; i < this.columns1.length; i++) {
          if (this.columns1[i].title == name) {
            this.columns2.push(this.columns1[i]);
            this.columns1.splice(i, 1);
            break;
          }
        }
      }
    },
    //size改变时的回调，参数为当前的size
    handleSizeChange(val) {
      // console.log("改变每页多少条，当前一页多少条", val);
      this.size = val;
      this.page = 1; //size改变时要把page重置为1，再把参数赋值给size，因为size改变会导致page数量改变
      this.getTableData();
    },
    //page改变时的回调函数，参数为当前页码
    handleCurrentChange(val) {
      // console.log("翻页，当前为第几页", val);
      this.page = val;
      this.getTableData();
    },
  },
};
</script>

<style scoped></style>
